<template>
<div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
            <el-row class="search-input">
                <el-form-item prop="name" label="广告图名称：">
                    <el-input v-model="filters.name" placeholder="名称" clearable></el-input>
                </el-form-item>
                <el-form-item prop="show" label="是否显示：">
                    <el-select v-model="filters.show" style="width: 200px;" placeholder="全部" clearable>
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="auditStatus" label="审核状态：">
                    <el-select v-model="filters.auditStatus" style="width: 200px;" placeholder="全部" clearable>
                        <el-option label="待审核" value="0"></el-option>
                        <el-option label="审核通过" value="1"></el-option>
                        <el-option label="审核拒绝" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="location" label="显示位置：">
                    <el-select v-model="filters.location" style="width: 200px;" placeholder="全部" clearable>
                         <el-option label="首页" :value="1"></el-option>
                        <el-option label="积分" :value="2"></el-option>
                        <el-option label="会员" :value="3"></el-option>
                        <el-option label="线下服务" :value="4"></el-option>
       
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row class="search-button">
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd" />
                </el-form-item>
            </el-row>
        </el-form>
    </div>

    <!--新增编辑界面-->
    <el-dialog :title="operation" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
        <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right" :disabled="this.disabled">
            <el-row class="searchDialog-input">
                <el-form-item label="显示位置：" prop="location">
                    <el-select v-model="dataForm.location"  placeholder="请选择位置" style="width: 100%" :disabled="this.disabled">
                        <el-option label="首页" :value="1"></el-option>
                        <el-option label="积分" :value="2"></el-option>
                        <el-option label="会员" :value="3"></el-option>
                        <el-option label="线下服务" :value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="广告图名称：" prop="name">
                    <el-input type="textarea" v-model="dataForm.name"  auto-complete="off" maxlength="300" placeholder="请输入名称" :disabled="this.disabled"></el-input>
                </el-form-item>
                <el-form-item label="图片：" prop="pic">
                        <el-upload
                          :action="imgUpload"
                          list-type="picture-card"
                          :on-success="handlePicSuccess"
                          v-model="dataForm.pic"
                          :on-exceed="handleExceed"
                          accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
                          :on-remove="handlePicRemove"
                          :limit="picLimit" style="float:left"
                          ref="pic_upload" :file-list="picList"
                          :disabled="this.disabled"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                <el-form-item label="排序：" prop="sort">
                    <el-input type="textarea" v-model="dataForm.sort" auto-complete="off" maxlength="300" placeholder="请输入排序" :disabled="this.disabled"></el-input>
                </el-form-item>
                <el-form-item label="是否显示：" prop="show">
                    <el-select v-model="dataForm.show" placeholder="请选择" style="width: 100%" :disabled="this.disabled">
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联分类：" prop="type">
                    <el-select v-model="dataForm.type" placeholder="请选择分类" style="width: 100%" :disabled="this.disabled">
                        <el-option label="文本" :value="1"></el-option>
                        <el-option label="外链" :value="2"></el-option>
                        <el-option label="商品" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文本内容：" prop="content">
                    <quill-editor v-model="dataForm.content" ref="myQuillEditor" style="height: 300px;" :options="editorOption" :disabled="this.disabled"></quill-editor>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="padding-top:60px;">
            <el-button :size="size" @click.native="dialogVisible = false" @click="clearFiles">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading" v-show="isSumbitShow">{{$t('action.submit')}}</el-button>
        </div>
    </el-dialog>

      <!--审核界面-->
      <el-dialog :title="audit" width="40%" :visible.sync="verifytime" :close-on-click-modal="false">
        <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right">
          <el-row class="searchDialog-input">

            <el-form-item label="审核状态：" prop="auditStatus">
              <el-select v-model="dataForm.auditStatus" placeholder="请选择审核状态" style="width: 50%">
                <el-option label="审核通过" :value="1"></el-option>
                <el-option label="审核拒绝" :value="2"></el-option>
              </el-select>
            </el-form-item>

          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="padding-top:60px;">
          <el-button :size="size" @click.native="verifytime = false">{{$t('action.cancel')}}</el-button>
          <el-button :size="size" type="primary" @click.native="reviewsubmitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
        </div>
      </el-dialog>

<div class="table-wrap">
    <jic-table
      :height="350"
      :operationWidth=300
      :tableList="tableList"
      :tableHeaderList="tableHeaderList"
      :totalSize="totalSize"
      :showDetailOperation=false
      :showEditOperation=true
      :showBatchDelete=false
      :showSelection=false
      :showIndex=false
      :showDeleteOperation=false
      :conceal=true
      :startUsing=true
      :blockUp=true
      @findPage="findPage"
      @handleDelete="handleDelete"
      @handleEdit="handleEdit"
      @handleDetail="handleDetail"
      @handleSizeChange="handleSizeChange"
      @handlePageChange="handlePageChange"
      @Auditmethods="Auditmethods"
      ref="jicTable"
    ></jic-table>
  </div>
</div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import jicTable from '@/components/jicComponentGallery/jicTable';
import KtButton from "@/views/Core/KtButton";
import {quillEditor} from "vue-quill-editor";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {format} from "@/utils/datetime";
import {exportExcel} from "@/utils/excel";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
    components: {
        PopupTreeInput,
        KtButton,
        TableColumnFilterDialog,
        quillEditor,
        jicTable
    },
    data() {
        return {
            size: "small",
            picLimit: 1,
            picList: [],
            disabled: false,
            isSumbitShow: false,
            verifytime: false, // 审核界面
            audit: false,
            imgUpload: this.utils.imgUploadUrl,
            filters: {
              name:"",
              show:"",
              auditStatus:"",
              location:"",
            },
            tableHeaderList: [
                {prop: "id",label: "序号",minWidth: null},
                {prop: "name",label: "轮播图名称",minWidth: null},
                {prop: "pic",label: "图片",minWidth: null,formatter:this.showPicType},
                {prop: "type",label: "关联分类",minWidth: null, formatter:this.showStatusType},
                {prop: "sort",label: "排序",minWidth: null,formatter:null},
                {prop: "show",label: "是否显示",minWidth: null,formatter:this.WhetherOrNotShown},
                // {prop: "channel",label: "广告渠道",minWidth: null,formatter:this.AdvertisingChannels},
                {prop: "location",label: "显示位置",minWidth: null,formatter:this.WhetherTheLocation},
                {prop: "auditStatus",label: "审核状态",minWidth: null,formatter:this.AdvertisingChannels},
                {prop: "createTime",label: "创建时间",minWidth: null},
            ],
            filterColumns: [],
            tableList:[],
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            },
            pageResult: {},
            options: {},
            editorOption: {},
            operation: null, // true:新增, false:编辑
            dialogVisible: false, // 新增编辑界面是否显示
            editLoading: false,
            dataFormRules: {
              location: [
                { required: true, message: "请选择显示位置", trigger: "change" }
              ],
              name: [
                { required: true, message: "请输入广告图名称", trigger: "blur" }
              ],
              show: [
                { required: true, message: "请选择是否显示", trigger: "change" }
              ],
              auditStatus: [
                { required: true, message: "请选择审核状态", trigger: "blur" }
              ],
            },
            //选中ID Array
            idArray: [],
            // 新增编辑界面数据
            dataForm: {
              location:"",
              auditStatus:"",
              name:"",
              pic:"",
              sort:"",
              show:"",
              type:"",
              content:"",
              title: "",
              context: "",
              status: ""
            }
        };
    },
    methods: {
        //列表图片处理
        showPicType(row, column, cellValue, index) {
            if (row.pic != '' && row.pic != null) {
            return '<img src="'+row.pic+'" style="width: 150px;max-height	: 150px;"/>';
            }
        },
       
        // 获取分页数据
        findPage: function (data) {
            // debugger
            let this_ = this;
            if (this_.filters == undefined || this_.filters == null) {
                this_.filters = {};
            }
            this_.filters.start = this.pageRequest.pageNum;
            this_.filters.limit = this.pageRequest.pageSize;

            this.utils.request.findSysManagementPage(this_.filters, function (res) {
              if (res.code === "0000") {
                this_.tableList = res.data.list;
                this_.totalSize = Number(res.data.total);
              } else {
                this_.tableList = [];
                this_.totalSize = 0;
              }
            });
        },

        //数据勾选
        selectionChange(data) {
            console.log(data);
            this.idArray = data.selections;
        },
        //列表关联分类处理
        showStatusType(row, column, cellValue, index) {
            if (row.type == 1) {
                return "文本";
            } else if (row.type == 2) {
                return "外链";
            } else if (row.type == 3) {
                return "商品";
            }
        },
        //是否显示处理
        WhetherOrNotShown(row, column, cellValue, index) {
            if (row.show == 1) {
                return "是";
            } else if (row.show == 0) {
                return "否";
            } 
        },
        //显示位置处理
        WhetherTheLocation(row, column, cellValue, index) {
            if (row.location == 1) {
                return "首页";
            } else if (row.location == 2) {
                return "积分";
            } else if (row.location == 3) {
                return "会员";
            } else if (row.location == 4) {
                return "线下服务";
            } 
        },
        // logo上传
        handlePicSuccess: function (res, file) {
            if (res.code == "0000") {
                this.dataForm.pic = res.data.imgUrl;
                let imgUrl = {};
                imgUrl.url = res.data.imgUrl;
                this.picList.push(imgUrl);
            }
        },
        //文件上传数量限制
        handleExceed: function () {
            this.$alert("最多上传一个", "警告", {
                confirmButtonText: "确定"
            });
        },
        //文件移除
        handlePicRemove(file, picList) {
            if (picList && picList.length === 0) {
                this.dataForm.pic = "";
            }
            this.picList = picList
        },
        //渠道处理
        AdvertisingChannels(row, column, cellValue, index) {
            if (row.auditStatus === 1) {
                return "审核通过";
            } else if (row.auditStatus === 2) {
                return "审核拒绝";
            }else {
              return "待审核"
            }
        },
        // 删除功能
        handleDelete(data) {

          var params = {};
          params.id = data.params[0].id;

          var this_ = this;
        this.utils.request.deleteSysManagement(params, function (res) {
          if (res.code == "0000") {
            this_.$message({
              message: "操作成功",
              type: "success"
            });
            this_.findPage(null);
          } else {
            this_.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      },
      // 6.每页记录数发生变化
      handleSizeChange(params) {
        this.pageRequest.pageSize = params.size;
      },

      // 7.请求页数发生变化
      handlePageChange(params) {
        this.pageRequest.pageNum = params.number;
        this.findPage();
      },
      // 显示审核界面
      Auditmethods: function (params) {
        this.verifytime = true;
        this.audit = "审核";
        this.dataForm = {};
        this.dataForm = Object.assign({}, params.row);
      },
        // 显示新增界面
        handleAdd: function () {
            
          this.dataForm = {
            location:"",
            name:"",
            pic:"",
            sort:"",
            show:"",
            type:"",
            content:"",
            title: "",
            context: "",
            status: ""
          };
            this.isSumbitShow = true;
            this.disabled = false;
            this.dialogVisible = true;
            this.operation = "新增";
          this.$nextTick(() => {
            this.$refs["dataForm"].resetFields();
          });

        },

        // 显示编辑界面
        handleEdit: function (params) {
            console.log(params);
            this.isSumbitShow = true;
            this.dialogVisible = true;
            this.disabled = false;
            this.operation = "编辑";
            this.picList = [];
            let imgUrl = {};
            if (params.row.pic != null && params.row.pic != "") {
            imgUrl.url = params.row.pic;
            this.picList.push(imgUrl);
            }
            this.dataForm = Object.assign({}, params.row);
        },

        // 显示详情界面
      handleDetail: function (params) {
            this.isSumbitShow = false;
            this.dialogVisible = true;
            this.disabled = true;
            this.operation = "详情";
            this.picList = [];
            let imgUrl = {};
            if (params.row.pic != null && params.row.pic != "") {
              imgUrl.url = params.row.pic;
              this.picList.push(imgUrl);
      }
            this.$nextTick(function () {
              this.dataForm = Object.assign({}, params.row);
            });
        },
        // 编辑
        submitForm: function () {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                  this.$confirm("确认提交吗？", "提示", {}).then(() => {
                    let this_ = this;
                    this.editLoading = true;
                    let params = Object.assign({}, this.dataForm);
                    this.utils.request.saveSysManagement(params, function (data) {
                      if (data.code == "0000") {
                        this_.$message({
                          message: "操作成功",
                          type: "success"
                        });
                        this_.dialogVisible = false;
                        this_.$refs["dataForm"].resetFields();
                      } else {
                        this_.$message({
                          message: "操作失败, " + data.msg,
                          type: "error"
                        });
                      }
                      this_.findPage(null);
                      this_.dialogVisible = false;
                      this_.operation = false;
                      this_.editLoading = false;
                      });
                  });
                }
            });
        },
// 审核
      reviewsubmitForm: function () {

        this.$refs.dataForm.validate(valid => {
          if (valid) {
            let this_ = this;
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            this.utils.request.setManagement(params, function (data) {
              if (data.code === "0000") {
                this_.$message({
                  message: "操作成功",
                  type: "success"
                });
                this_.verifytime = false;
                this_.$refs["dataForm"].resetFields();
              } else {
                this_.$message({
                  message: "操作失败, " + data.msg,
                  type: "error"
                });
              }
              this_.findPage();
              this_.verifytime = false;
              this_.audit = false;

              this_.editLoading = false;
            });
          }
        })
      },
        //启用停用
        editStatus: function () {
            if (this.idArray.length != 1) {
                this.$message({
                    message: "请选择一条数据进行处理, ",
                    type: "error",
                    center: true,
                    offset: 250,
                    duration: 1000
                });
            } else {
                let params = {};
                params.id = this.idArray[0].id;
                if (this.idArray[0].status == '1') {
                    params.status = '2';
                } else if (this.idArray[0].status == '2') {
                    params.status = '1';
                }
                var this_ = this;
                this.utils.request.editSysNotice(params, function (res) {
                    this_.$message({
                        message: '操作成功',
                        type: 'success',
                        center: true,
                        offset: 250,
                        duration: 1000
                    });
                    this_.findPage(null);
                });
            }
        },
        // 时间格式化
        dateFormat: function (row, column, cellValue, index) {
            return format(row[column.property]);
        },
        // 处理表格列过滤显示
        displayFilterColumnsDialog: function () {
            this.$refs.tableColumnFilterDialog.setDialogVisible(true);
        },
      clearFiles() {
        this.$refs["pic_upload"].clearFiles();
      },
      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.findPage(null);
        }
      }

    },

    mounted() {
        this.findPage();
    }
};
</script>

<style lang='scss' scoped>
</style>
